<!--
 * @Description: 饼图
 * @Author: huacong
 * @Date: 2020-04-17 15:20:10
 * @LastEditTime: 2020-08-25 14:05:23
 * @LastEditors: huacong
-->
<template>
  <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding="padding">
    <v-tooltip :showTitle="false" dataKey="item*percent" v-if="tooltipShow"/>
    <v-axis />
    <v-legend dataKey="item" v-if="legendShow"/>
    <v-pie position="percent" color="item" :vStyle="pieStyle" :label="labelConfig" />
    <v-coord type="theta" :radius="radius" :innerRadius="innerRadius" />
  </v-chart>
</template>
<script>
const DataSet = require('@antv/data-set')

const sourceData = [
  { item: '事例一', count: 40 },
  { item: '事例二', count: 21 }
]

export default {
  name: 'Pie',
  props: {
    radius: {
      type: Number,
      default: 0.75
    },
    innerRadius: {
      type: Number,
      default: 0.6
    },
    height: {
      type: Number,
      default: 240
    },
    tooltipShow: {
      type: Boolean,
      default: false
    },
    legendShow: {
      type: Boolean,
      default: false
    },
    padding: {
      type: Array,
      default: () => [20, 20, 56, 20]
    },
    sourceData: {
      type: Array,
      default: () => sourceData
    },
    scale: {
      type: Array,
      default: () => [{
        dataKey: 'percent',
        min: 0,
        formatter: '.0%'
      }]
    },
    pieStyle: {
      type: Object,
      default: () => {
        return {
          stroke: '#fff',
          lineWidth: 1
        }
      }
    },
    labelConfig: {
      type: Array,
      default: () => {
        return [
          'count',
          {
            formatter: (val, item) => {
              return item.point.item + ': ' + val + '%'
            }
          }
        ]
      }
    }
  },
  computed: {
    data () {
      const dv = new DataSet.View().source(this.sourceData)
      dv.transform({
        type: 'percent',
        field: 'count',
        dimension: 'item',
        as: 'percent'
      })
      return dv.rows
    }
  }
}
</script>
